import { Alert,  Tabs, TabItem } from '@aws-amplify/ui-react';
import { TerminalCommand } from '@/components/InstallScripts';

## `@aws-amplify/ui-react`
### 4.x to 5.x
#### Installation
Install the 5.x version of the `@aws-amplify/ui-react` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install @aws-amplify/ui-react@5.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add @aws-amplify/ui-react@5.x" />
</TabItem>
</Tabs>

#### Update and usage

`@aws-amplify/ui-react@5.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-react@5.x` drops Amplify Geo components. They are moved to a separate new package `@aws-amplify/ui-react-geo`.
Install the 1.x version of the `@aws-amplify/ui-react-geo` library and update your existing imports accordingly.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install @aws-amplify/ui-react-geo@1.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add @aws-amplify/ui-react-geo@1.x" />
</TabItem>
</Tabs>

Styles supporting Amplify Geo UI components are moved to `@aws-amplify/ui-react-geo` library and are not available through `@aws-amplify/ui-react` library anymore.
When using components like `MapView` or `LocationSearch` from `@aws-amplify/ui-react-geo` library, import the styles from the same library as well.

```tsx
import '@aws-amplify/ui-react-geo/styles.css';
```

For example, you can import the MapView component with related styles from `@aws-amplify/ui-react-geo` library.

```tsx
import { Amplify } from 'aws-amplify';
import { MapView } from '@aws-amplify/ui-react-geo';

import '@aws-amplify/ui-react-geo/styles.css';

import awsExports from './aws-exports';

Amplify.configure(awsExports);

export default function BasicMap() {
  return <MapView />;
}
```

#### 2. `@aws-amplify/ui-react@5.x` drops Amplify Notifications components. They are moved to a separate new package `@aws-amplify/ui-react-notifications`.
Install the 1.x version of the `@aws-amplify/ui-react-notifications` library and update your existing imports accordingly.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install @aws-amplify/ui-react-notifications@1.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add @aws-amplify/ui-react-notifications@1.x" />
</TabItem>
</Tabs>

For example, you can import the In-App messaging components like InAppMessageDisplay and InAppMessagingProvider from `@aws-amplify/ui-react-notifications` library.

```tsx
import { Text } from '@aws-amplify/ui-react';
import {
  InAppMessageDisplay
  InAppMessagingProvider,
} from '@aws-amplify/ui-react-notifications';

import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';

Amplify.configure(awsExports);

const App = () => {
  useEffect(() => {
    InAppMessaging.syncMessages();
  }, []);

  return (
    <InAppMessagingProvider>
      <InAppMessageDisplay />
      <Text>In-App Messaging Example</Text>
    </InAppMessagingProvider>
  );
};
```

#### 3. `@aws-amplify/ui-react@5.x` removes the `to` prop from the `Link` component.

If using a `Link` component with the `to` prop, remove `to` and instead extend from the underlying rendered third-party `Link`. For example, using React Router `Link` with the Amplify UI `Link` component:

```tsx
import { Link } from '@aws-amplify/ui-react';
import { Link as ReactRouterLink } from 'react-router-dom';

<Link as={ReactRouterLink} to="/">Home</Link>
```

#### 4. `@aws-amplify/ui-react@5.x` updates component types to include the underlying rendered HTML element's attributes and strictly types the `View` component.

### 3.x to 4.x
#### Installation
Install the 4.x version of the `@aws-amplify/ui-react` library and the 5.x version of the `aws-amplify` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install aws-amplify@5.x @aws-amplify/ui-react@4.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add aws-amplify@5.x @aws-amplify/ui-react@4.x" />
</TabItem>
</Tabs>

#### Update and usage

`@aws-amplify/ui-react@4.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-react@4.x` removes `isMultiline` prop from `TextField`.

Replace any `TextField` components using the `isMultiline` prop with the `TextAreaField` component.

```diff
- <TextField
-  isMultiline
+ <TextAreaField
```

#### 2. `@aws-amplify/ui-react@4.x` moves text directionality support to ThemeProvider

<Alert variation="info" heading="Note">
  If you are NOT using `dir="rtl"` in your application, feel free to skip this item.
</Alert>

`@aws-amplify/ui-react` has a dependency on Radix components for Menu, SliderField, Tabs, and Expander. There were a number of changes in the [July 21, 2022 release](https://www.radix-ui.com/docs/primitives/overview/releases#july-21-2022) of `radix-ui/*` packages, and the breaking change for `@aws-amplify/ui-react` was removal of support for the `dir` HTML attribute, and the addition of the `DirectionProvider`. In order to make the transition seamless for most of Amplify users, we've added the `DirectionProvider` with a default `direction` of `ltr` to the `ThemeProvider`.

If your application is using right to left directionality, the example below shows the needed change for apps using the native HTML `dir="rtl"`:

```diff
- <View dir="rtl">
+ <ThemeProvider direction="rtl">
```
Also see: [Internationalization](/getting-started/internationalization)

#### 3. `@aws-amplify/ui-react@4.x` removes legacy component exports

The following deprecated components imported from `@aws-amplify/ui-react/legacy` are removed:

- [AmplifyAuthenticator](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-authenticator/readme.md)
- [AmplifySignIn](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-sign-in/readme.md)
- [AmplifySignOut](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-sign-out/readme.md)
- [AmplifyChatbot](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-chatbot/readme.md)
- [AmplifyPhotoPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-photo-picker/readme.md)
- [AmplifyPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-picker/readme.md)
- [AmplifyS3Album](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-album/readme.md)
- [AmplifyS3Image](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image/readme.md)
- [AmplifyS3ImagePicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-image-picker/readme.md)
- [AmplifyS3Text](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text/readme.md)
- [AmplifyS3TextPicker](https://github.com/aws-amplify/amplify-js/blob/v4-stable/packages/amplify-ui-components/src/components/amplify-s3-text-picker/readme.md)
- withAuthenticator

Depending on the v1 version of this package and re-exporting these components caused issues. If you still want to use these legacy components you can depend on the v1 version of this package with an npm alias in your dependencies: 

`"@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9"`

[Documentation for legacy components](https://github.com/aws-amplify/amplify-js/tree/v4-stable/packages/amplify-ui-components#readme)


#### 4. `@aws-amplify/ui-react@4.x` adds `inputStyles` prop to Field primitives

Before 4.0, Field components like `TextField` would try to intelligently apply certain style props onto the wrapper element and some on the input element. We felt this was a little too opaque to users, but we still want to allow you to style the input element directly. `@aws-amplify/ui-react@4.x` adds an `inputStyles` prop to Field components so you can apply style props directly on the input (or `textarea` or `select`) as well as on the wrapper element. 

Hopefully this change won't affect your code but will allow for more customization and control. 

<Alert variation="info" heading="Note">
  The TextAreaField component does apply 1 style prop directly on the `textarea` element: `resize`. We felt this one makes sense to apply direclty on the the `textarea` element and not the wrapper element.
</Alert>

#### 5. `@aws-amplify/ui-react@4.x` moves automatic signin on signup logic to `aws-amplify`. 

If you are overriding `Auth.signUp`, update the override function call to include the `autoSignIn` option set to `enabled`. If this change is not made, users will not be automatically signed in on signup.

```diff
 async handleSignUp(formData) {
  let { username, password, attributes } = formData;
  // custom username
  username = username.toLowerCase();
  attributes.email = attributes.email.toLowerCase();
  return Auth.signUp({
    username,
    password,
    attributes,
+   autoSignIn: {
+     enabled: true
+   }
  });
}

```

##### 6. `@aws-amplify/ui-react@4.x` removes legacy i18n translation keys removed

We replaced following legacy Authenticator texts:

- `Forgot your password? ` with the trailing space is replaced by `Forgot your password`.

If you were using `I18n` to translate those keys, please update your translations accordingly to match the new strings.

### 2.x to 3.x

#### Installation
Install the 3.x version of the `@aws-amplify/ui-react` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install aws-amplify @aws-amplify/ui-react@3.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add aws-amplify @aws-amplify/ui-react@3.x" />
</TabItem>
</Tabs>

#### Update and usage

`@aws-amplify/ui-react@3.x` introduces the following breaking changes:

#### 1. `@aws-amplify/ui-react@3.x` removes the built-in icons (Icon360, IconSave, etc).

Replace any icon components in use the react-icons package or other React icon libraries in its place.

```diff
- import { IconSave } from '@aws-amplify/ui-react';
+ import { MdSave } from 'react-icons/md';
```

Note: We did not remove the [Icon](/react/components/icon) component, which allows customers to easily add SVG icons using the `pathData` prop.

##### 2. `@aws-amplify/ui-react@3.x` removes `ShareText`.

This export has been removed and should no longer be used.

### 1.x to 2.x
#### Installation

Install the 2.x version of the `@aws-amplify/ui-react` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install aws-amplify @aws-amplify/ui-react@2.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add aws-amplify @aws-amplify/ui-react@2.x" />
</TabItem>
</Tabs>

#### Update and Usage

Update the **App.js** with the new `Authenticator` and remove the old `AmplifyAuthenticator` as seen below:

**App.js**

```diff
- import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';

+ import { Authenticator } from '@aws-amplify/ui-react';
+ import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

 const App = () => (
-  <AmplifyAuthenticator>
-    <div>
-      My App
-      <AmplifySignOut />
-    </div>
-  </AmplifyAuthenticator>
+  <Authenticator>
+      {({ signOut, user }) => (
+        <main>
+          <h1>Hello {user.username}</h1>
+          <button onClick={signOut}>Sign out</button>
+        </main>
+      )}
+    </Authenticator>
);

```

#### Authenticator breaking changes (1.x to 2.x)

The latest version of the `Authenticator` component has several differences from earlier versions. Here are a few of the major changes that you'll need to look out for.

#### Slots

All the slot locations have changed with the latest version of the `Authenticator`. To get a
sense of the changes please check out the [Headers and Footers](../connected-components/authenticator/customization#headers--footers) section.

#### Form Fields

The latest version of the `Authenticator` has a different format for the `formFields` prop. It also no longer accepts
`inputProps` nor `hint`. Instead, it's recommended that you use the [Headers and Footers Slots](../connected-components/authenticator/customization#headers--footers) or use the
[Sign Up Fields customization](../connected-components/authenticator/customization#sign-up-fields). For more information on form field customizations
please see the [Form Field Customization](../connected-components/authenticator/customization#form-field-customization) section.

#### CSS Styling

The latest version of the `Authenticator` has a completely different set of CSS variables. Please look over the [Amplify CSS Variables](../connected-components/authenticator/customization#styling) section for more information.

#### `onAuthUIStateChange`

Previous versions of `Authenticator` exposed a `onAuthUIStateChange` handler to detect Auth state changes. For similar functionality see [useAuthenticator](/react/connected-components/authenticator/advanced#access-auth-state).

## `@aws-amplify/ui-react-liveness`
### 1.x to 2.x
#### Installation

Install the 2.x version of the `@aws-amplify/ui-react-liveness` library.

<Tabs>
<TabItem title="npm">
<TerminalCommand command="npm install aws-amplify @aws-amplify/ui-react-liveness@2.x" />
</TabItem>
<TabItem title="yarn">
<TerminalCommand command="yarn add aws-amplify @aws-amplify/ui-react-liveness@2.x" />
</TabItem>
</Tabs>

#### Update and Usage

Optionally update your App with the new prop usage:

**App.js**

```diff
 const App = () => (
  return (
    <ThemeProvider>
      {loading ? (
        <Loader />
      ) : (
        <FaceLivenessDetector
          sessionId={createLivenessApiData.sessionId}
          region="us-east-1"
          onAnalysisComplete={handleAnalysisComplete}
-         onError={(error) => {
-           console.error(error);
-         }}
+         onError={(livenessError) => {
+           console.error({ state: livenessError.state, error: livenessError.error});
+         }}
        />
      )}
    </ThemeProvider>
  );
);

```

#### CDN CSP Policy

The 2.x version of the `FaceLivenessDetector` has updated the default CDN for TensorFlow and Blazeface to a new URL. If your application has an existing CSP policy, update your policy to allow https://cdn.liveness.rekognition.amazonaws.com. Please look over the [Liveness Config](../connected-components/liveness/customization#facelivenessdetectorconfig) section for more information.